<template>
  <div>
    <router-view></router-view>
    <div id="footer">
        <router-link to="/userHome/homePage" class="home" active-class="active" >主页</router-link>
        <router-link to="/userHome/userBill" class="bill" active-class="active">账单</router-link>
        <router-link to="/userHome/userCount" class="count" active-class="active">统计</router-link>
        <router-link to="/userHome/userInfo" class="info" active-class="active">个人</router-link>
    </div>
  </div>
</template>

<script>

export default {
    name:'UserHome',
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    
    #footer {
        height: 50px;
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    
    a {
        height: 50px;
        width: 24%;
        margin: 0;
        padding: 0;
        display: inline-block;
        position: relative;
        bottom: 0;
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: center top;
        text-align: center;
        line-height: 84px;
        overflow: hidden;
        text-decoration: none;
        font-size: smaller;
        color: #e6e6e6;
    }
    


    .home {
        background-image: url('../../assets/images/主页.png');
    }
    
    .bill {
        background-image: url('../../assets/images/账单.png');
    }
    
    .count {
        background-image: url('../../assets/images/统计.png');
    }
    
    .info {
        background-image: url('../../assets/images/个人.png');
    }

    .home.active{
        background-image: url('../../assets/images/主页active.png');
    }
    .bill.active{
        background-image: url('../../assets/images/账单active.png');
    }
    .count.active{
        background-image: url('../../assets/images/统计active.png');
    }
    .info.active{
        background-image: url('../../assets/images/个人active.png');
    }
    .active{
        color: #1296db;
    }    
</style>